<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Effects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="effects_combi.css" rel="stylesheet" type="text/css" />
    <script src="../../lib/MochiKit/MochiKit.js" type="text/javascript"></script>
    <script src="../../lib/MochiKit/Position.js" type="text/javascript"></script>
    <script src="../../lib/MochiKit/Visual.js" type="text/javascript"></script>
    <script type="text/javascript">
    function showEffect() {
      f = document.forms[0];
      v = f['effect'].value;
      if (v.substring(0, 1) == '+') {
        v = "MochiKit.Visual.toggle('demo-all','" + v.substring(1) + "'";
      } else {
        v = "MochiKit.Visual." + v + "('demo-all'";
      }
      if (f['slow'].checked) {
        v += ',{duration:4}';
      }
      v += ')';
      var v = eval(v);
    }
    function resetBox() {
      e = MochiKit.DOM.getElement('demo-all');
      MochiKit.Visual.appear(e);
      MochiKit.Style.setStyle(e, {});
    }
    </script>

</head>

<body>
	<h3>Here are demos of all combination effects:</h3>
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')">
        <span>Click for Visual.appear demo</span>
      </div>
      <div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)">
        <span>Click for Visual.fade demo</span>
      </div>
      <div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)">
        <span>Click for Visual.puff demo</span>
      </div>
      <div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)">
        <span>Click for Visual.blindDown demo</span>
      </div>
      <div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)">
        <span>Click for Visual.blindUp demo</span>
      </div>
      <div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)">
        <span>Click for Visual.switchOff demo</span>
      </div>
      <div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)">
        <span>Click for Visual.slideDown demo</span>
      </div>
      <div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)">
        <span>Click for Visual.slideUp demo</span>
      </div>
      <div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)">
        <span>Click for Visual.dropOut demo</span>
      </div>
      <div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)">
        <span>Click for Visual.shake demo</span>
      </div>
      <div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)">
        <span>Click for Visual.pulsate demo</span>
      </div>
      <div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)">
        <span>Click for Visual.squish demo</span>
      </div>
      <div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)">
        <span>Click for Visual.fold demo</span>
      </div>
       <div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)">
        <span>Click for Visual.grow demo</span>
      </div>
      <div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)">
        <span>Click for Visual.shrink demo</span>
      </div>
      <div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)">
        <span>Click for Visual.Highlight demo</span>
      </div>
</div>

	<h3>Here are all demos on one single element:</h3>
  <div id="demo-all" class="example" onclick="showEffect()">
    <span>Click to see the selected effect</span>
  </div>
<form action="" style="margin-left:140px;height:150px;">
  <fieldset style="border:none;">
  <select name="effect" size="1">
    <optgroup label="Single effects">
      <option value="appear">appear</option>
      <option value="fade">fade</option>
      <option value="puff">puff</option>
      <option value="blindDown">blindDown</option>
      <option value="blindUp">blindUp</option>
      <option value="slideDown">slideDown</option>
      <option value="slideUp">slideUp</option>
      <option value="switchOff">switchOff</option>
      <option value="dropOut">dropOut</option>
      <option value="shake">shake</option>
      <option value="pulsate">pulsate</option>
      <option value="squish">squish</option>
      <option value="fold">fold</option>
      <option value="grow">grow</option>
      <option value="shrink">shrink</option>
      <option value="Highlight">Highlight</option>
    </optgroup>
    <optgroup label="Toggle effects">
      <option value="+appear">appear</option>
      <option value="+blind">blind</option>
      <option value="+slide">slide</option>
      <option value="+size">size</option>
    </optgroup>
  </select>
  &nbsp;
  <input type="checkbox" name="slow"/> in slow-motion
  </fieldset>
  <fieldset style="border:none;">
  <input type="button" name="show" value="Click to show effect" onclick="showEffect()"/>
  <input type="button" name="show" value="Click to reset box" onclick="resetBox()"/>
  </fieldset>
</form>

<div class="demo">
	<h3>Links to other samples:</h3>
  <ul style="float:left;margin-top:0;">
    <li><a href="effects_bigslide.html">Big slide effects</a></li>
    <li><a href="effects_slide.html">Slide effects</a></li>
    <li><a href="effects_blind.html">Blind effects</a></li>
    <li><a href="effects_blindslide.html">Blind/Slide effects</a></li>
    <li><a href="effects_fadeappear.html">Fade/Appear effects</a></li>
  </ul>
  <ul style="float:left;margin-top:0">
    <li><a href="effects_onload.html">Onload effects</a></li>
    <li><a href="effects_scroll.html">Scroll effects</a></li>
    <li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li>
    <li><a href="effects_queue.html">Queue effects</a></li>
    <li><a href="effects_queue_limit.html">Queue limit effects</a></li>
  </ul>
</div>

<div class="demo"/>

</body>
</html>
